<template>
  <Select
    v-model="searchValue"
    :placeholder="
      config.placeholder ? config.placeholder : '请选择' + config.label
    "
    transfer
    clearable
    :filterable="config.filterable"
    :multiple="config.type === 'selectMultiple'"
    :max-tag-count="config.type === 'selectMultiple' ? 4 : 1"
    :disabled="config.disabled"
    @on-change="config.onChange"
    size="default"
  >
    <Option
      v-for="item in config.option"
      v-bind:key="item"
      :value="item.value"
      :disabled="item.disabled"
      >{{ item.label }}</Option
    >
  </Select>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps(['model', 'config'])
const emit = defineEmits(['update'])

const searchValue = computed({
  get() {
    return props.model
  },
  set(value) {
    emit('update', props.config, value)
  },
})
</script>

<style lang="less" scoped>
:deep(.ivu-select-selection) {
  padding-left: 3px;
  border-radius: 20px;
}

:deep(.ivu-select-selection .ivu-select-selected-value) {
  font-size: 13px;
}

:deep(.ivu-select-selection .ivu-select-placeholder) {
  font-size: 13px;
}
</style>
